<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";

import caruselListAdData from "@/dicts/mainPage/carouselListAd.json";
import businessListData from "@/dicts/mainPage/businessList.json";
import companyUrlListData from "@/dicts/mainPage/companyUrlList.json";

import list from "@/views/content/mainPage/compo/list.vue";
import downlist from "@/views/content/mainPage/compo/downlist.vue";
import carouselCompo from "@/components/carousel/carousel.vue";
import carouselCom from "@/components/carousel/carousellink.vue";
import ButtonList from "@/views/content/mainPage/compo/buttonList.vue";
import CompanyUrl from "@/views/content/mainPage/compo/companyUrl.vue";
import emitter from "@/utils/mitt.js";

const getAssetsFile = inject("getAssetsFile");

const carouselListAd = ref([]);
carouselListAd.value = caruselListAdData.data.result;

// 业务办理
const businessList = ref([]);
// 友情链接
const companyUrlList = ref([]);
const getListData = () => {
	businessList.value = businessListData.data.result;
	companyUrlList.value = companyUrlListData.data.result;
};
getListData();

const getButtonList = () => {
	return businessList.value;
};

const changePath = (path, query = null) => {
	emitter.emit("changePath", {
		path: path,
		query: query,
	});
};
</script>

<template>
	<!--<div>首页</div>-->
	<div class="content">
		<div class="flex" style="margin-bottom: 20px; gap: 20px">
			<div class="spaceItemWidth">
				<carousel-compo :height="'280px'" :width="'100%'" :type="1"> </carousel-compo>
			</div>

			<div class="spaceItemWidth">
				<list :key="new Date().getTime()" :title="'协会动态'" :id="3" :limit="7" :path="'/index/committeeActivity'"></list>
			</div>

			<div class="spaceItemWidth">
				<list :key="new Date().getTime() + 1" :title="'通知公告'" :id="7" :limit="7" :type="'number'" :path="'/index/news/noticeList'"></list>
			</div>
		</div>
		<div class="flex" style="height: 210px; margin-bottom: 20px; gap: 20px">
			<div class="spaceItemWidth">
				<list :key="new Date().getTime() + 2" :title="'协会培训'" :id="2" :limit="5" :path="'/index/committeeTraining'"></list>
			</div>
			<div class="spaceItemWidth">
				<list :key="new Date().getTime() + 3" :title="'网络安全资讯'" :id="1" :limit="5" :path="'/index/webSecure'"></list>
			</div>
			<div class="spaceItemWidth">
				<button-list :key="new Date().getTime() + 4" :title="'业务办理'" :list="getButtonList()"></button-list>
			</div>
		</div>
		<div style="height: 210px; margin-bottom: 20px; gap: 20px">
			<carousel-compo :height="'210px'" :width="'100%'" :type="2"> </carousel-compo>
		</div>
		<div class="flex" style="margin-bottom: 20px; gap: 20px">
			<div class="spaceItemWidth">
				<list :key="new Date().getTime() + 4" :title="'行业资讯'" :id="6" :limit="5" :path="'/index/news/industry'"></list>
			</div>
			<div class="spaceItemWidth">
				<list :key="new Date().getTime() + 5" :title="'政策法规'" :id="5" :limit="5" :path="'/index/policy'"></list>
			</div>
			<div class="spaceItemWidth">
				<downlist :title="'下载中心'" :limit="5"></downlist>
			</div>
		</div>
		<div style="height: 210px; margin-bottom: 20px">
			<list :title="'友情链接'"></list>
			<div style="padding: 20px; background-color: #dddddd">
				<carousel-com :height="'140px'" :width="'100px'" :type="3"> </carousel-com>
			</div>
		</div>
	</div>
</template>

<style scoped>
.carouselText {
	position: fixed;
	bottom: 0;
	flex-grow: 1;
	color: white;
	background: rgba(0, 0, 0, 0.6);
	line-height: 36px;
	font-size: 18px;
	padding: 0 20px;
}

.spaceItemWidth {
	width: 32%;
}
.carousel-img {
	width: 100%;
	cursor: pointer;
	object-fit: cover;
}
</style>
